<!DOCTYPE html>
<html lang="en">
{include file='index/header' title='音乐之家 留言板'}
{include file='index/index_header'}

<script type="text/javascript">
    $(document).ready(function(){
        $("#jMenu").jMenu();
    })
    $(function() {
        $(".input-date").datepicker({
            dateFormat: "yy-mm-dd"
        })
    })
</script>
<body>
<!--<div id="fireworks">-->
{include file='index/effect_header'}
<!--</div>-->
<div id="controller">
    <!--修改密码 弹窗 -->
    {include file='index/change_pwd'}
    {include file='index/personal'}
    <div class="container" style="margin-top:10px;">
        {include file='index/contact'}
    </div>
    <div class="container" style="margin-top:10px;" >
        <input v-model="title" name="title"  type="text" class="input-text input-180" placeholder="标题" autocomplete="off">
        <input v-model="startDate" name="startDate" id="startDate" type="text" class="input-date input-text" placeholder="时间：从">
        <input v-model="endDate" name="endDate" id="endDate" type="text" class="input-date input-text" placeholder="时间：到">
        <select v-model="module" class="input-text input-auto" type="text" >
            <option value="">模块选择</option>
            <option value="0">其他</option>
            <option value="1">吉他</option>
            <option value="2">钢琴</option>
        </select>
        <button type="submit" :issend="!disabled"  @click="getData" class="input-button input-submit">查询</button>
<!--        <input-submit :issend="disabled" @send="getData"></input-submit>-->

    </div>

    <div class="container" style="margin-top:10px;" >
    <table width="100%">
        <colgroup width="2%"></colgroup>
        <colgroup width="4%"></colgroup>
        <colgroup width="15%"></colgroup>
        <colgroup width="2%"></colgroup>
        <colgroup width="6%"></colgroup>
        <colgroup width="1%"></colgroup>

        <thead >
        <tr class="title" >
            <th>序号</th>
            <th>模块</th>
            <th>标题</th>
            <th>评论</th>
            <th>发布日期</th>
            <th>操作</th>
        </tr>
        </thead>

        <tbody class="center">
        <tr  v-for="(item,index) in data_list" >
        	<td >{{index + 1}}</td>
        	<td >{{item.module}}</td>
            <td>
                <!--:style="{cursor:item.op_auth == 0 ? 'pointer' : 'not-allowed'}"   -->
                <a type="submit" @click="readData(item.id,username)">
                    {{item.title}}

                    <img v-if="item.count>=5" src="__ROOT__/static/images/hot.gif"/>
                </a>

            </td>
            <td>{{item.count}}</td>
            <td>{{item.create_time}}</td>
            <td style="display: flex;width: 100%;height: 10%;justify-content:space-around">
                <button  v-if="!level"  type="submit" @click="deleteData(item.id)" class="btn btn-danger">删除</button>

<!--                <button   :disabled="!username" @click="changeData(item.id)" class="btn1 btn1-danger" :style="{cursor:username ? 'pointer' : 'not-allowed'}">修改</button>-->
<!--                <a  v-if="disabled"  :href="'change/'+item.id" class="btn1 btn1-danger">修改</a>-->

                <button  :disabled="item.op_auth==1" :style="{cursor:item.op_auth == 0 ? 'pointer' : 'not-allowed'}" v-if="username"  @click="replyData(item.id,username,item.op_auth)" class="btn1 btn1-danger" >回复</button>

            </td>
        </tr>
        </tbody>
    </table>
        <div class="nocontent">
            <span v-show='!data_list.length' v-if="!table_show" style="font-size: 18px;text-align: center">暂无内容......</span>
        </div>
        <page-turn2 :page="page" :pagesum="pageSum" :sum="sum" @update="changelist"></page-turn2>

    </div>


</div>
<!--<img src="__STATIC__/images/1.gif" id="im" alt="" />-->
<!--<script type="text/javascript">-->
<!--    var imobj = document.getElementById("im");-->
<!--    document.onmousemove = function (e) {-->
<!--        imobj.style.left = e.clientX + 25 + "px";-->
<!--        imobj.style.top = e.clientY + "px";-->
<!--    }-->
<!--</script>-->

<!--<div class="box">-->
<!--    <ul class="minbox">-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--    </ul>-->
<!--    <ol class="maxbox">-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--    </ol>-->
<!--</div>-->
</body>

<script >
    var controller = new Vue({
        el : '#controller',
        data : {
            title : '',
            startDate : '',
            endDate:'',
            data_list: {

            },
            // PAGE_NUM: 0,
            id:'',
            /*当前页*/
            page: 1,
            /*总页数*/
            pageSum: 1,
            /*总条数*/
            sum: 1,
            disabled:false,
            table_show: false,
            start:'',
            limit:'',
            username: localStorage.mUser,
            status:'',
            level:true,
            auth_level:true,
            changeP:false,
            personal_button:false,
            singular:{
                oldPWD:'',
                newPWD:'',
                newPWDr:'',
            },
            personal_list:{},
            module:'',
        },
        created: function() {
            var _self = this;
            _self.online()
            _self.getData()
        },
        // mounted() {
        //     // 关闭浏览器窗口的时候清空浏览器缓存在localStorage的数据
        //     window.onbeforeunload = function (e) {
        //         var storage = window.localStorage;
        //         storage.clear()
        //     }
        //
        // },
        methods : {
            online:function() {
                var _self = this;
                libs.ajax('index/index/checkOnline', {

                },function (result) {
                    if(result.status==1)
                    {
                        alert('您已离线，请登录！');
                        localStorage.clear();
                        window.location.href = '/login'
                    }
                })
            },
            getData: function() {
                var _self = this;

                _self.startDate = $('#startDate').val() || ''
                _self.endDate = $('#endDate').val() || ''
                // this.startDate = $('#startDate').val() || new Date().format('yyyy-MM-dd')
                // this.endDate = $('#endDate').val() || new Date().format('yyyy-MM-dd')
                _self.disabled = false
                _self.table_show = false
                libs.ajax('index/index/getArticalInfo', {
                    title:_self.title,
                    startDate:_self.startDate,
                    endDate:_self.endDate,
                    start: (_self.page - 1) * 30,
                    limit: 30,
                    module:_self.module,
                }, function(result) {
                    _self.data_list =  []
                    // _self.pageSum =  1
                    // _self.sum =  0

                    if(result.status == 0)
                    {
                        _self.level = result.level
                        if(result.auth_level == 0)
                        {
                            _self.auth_level = false
                        }
                        _self.disabled = true
                        _self.table_show = true
                        _self.data_list = result.data.list
                        _self.status = result.status
                        _self.pageSum = result.data.page.total_page
                        _self.sum = result.data.page.total_num

                    }

                })
            },
            deleteData: function(id) {
				this.online();
                
				if (!confirm('确认删除吗？')) return;
				
                libs.ajax('index/index/delete', {
                    id:id
                }, function(result) {
                    alert(result.msg)
					location.reload();

                })
            },
            changeData: function(id) {
                libs.ajax('index/index/change_html', {
                    id:id
                }, function(result) {
                    if(result.status ==0)
                    {
                        window.location.href='change/'+id
                    }
                    else if(result.status ==1)
                    {
                        alert(result.msg);
                        setTimeout(gotoindex,1000);
                        function gotoindex() {
                            window.location.href = '/login'
                        }
                    }

                })
            },
            readData: function(id,username) {
                libs.ajax('index/index/incrementCount', {
                    id:id,
                }, function(result) {
                    if(result.status == 0)
                    {
                        window.location.href='read/'+id+'/name/'+username
                    }
                    else if(result.status ==1)
                    {
                        alert(result.msg);
                        setTimeout(gotoindex,1000);
                        function gotoindex() {
                            window.location.href = '/login'
                        }
                    }
                })
            },
            replyData: function(id,username) {
                libs.ajax('index/index/incrementCount', {
                    id:id,
                }, function(result) {
                    if(result.status == 0)
                    {
                        window.location.href='reply/'+id+'/name/'+username
                    }

                })
            },
            changelist: function (val) {
                this.page = val
                this.getData()
            },

            dologout: function() {
                if (!confirm('您确定退出吗?')) return;
                libs.ajax('index/login/DoLogout', {
                }, function(result) {
                    alert(result.msg)
                    if(result.status == 0)
                    {
                        localStorage.clear();
                        location.reload();
                    }

                })
            },
            send: function() {
                var _self = this;

                if(!_self.singular.oldPWD || !_self.singular.newPWD || !_self.singular.newPWDr){
                    alert('表单不能为空')
                    return;
                }

                if (_self.singular.newPWD.length < 6 || _self.singular.newPWD.length > 20) {
                    alert("密码长度必须为6-20位，请重新输入！");
                    return;
                }

                if (_self.singular.newPWD != _self.singular.newPWDr) {
                    alert("新设置密码两次不一致，请重新输入！");
                    return;
                }

                libs.ajax('index/regist/ChangePassword', {
                    old_pwd : _self.singular.oldPWD,
                    new_pwd : _self.singular.newPWD,
                    new_pwd_a : _self.singular.newPWDr
                }, function(result) {
                    alert(result.msg)
                    if(result.status == 0){
                        localStorage.clear()
                        top.location.href = '/'
                    }
                })
            },
            changePwd(){
                this.changeP=true;
                this.singular={}
            },
            /*个人信息接口*/
            personal(){
                var _self = this;
                this.personal_button=true;
                libs.ajax('index/index/personal_info', {
                }, function(result) {
                    _self.personal_list = result.data;
                    console.log(_self.personal_list);
                })
            },
        }
    })

</script>
</html>
